<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Filters</title>
  </head>
  <body>
    <!-- Blur -->
    <div class="blur-none">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt
      animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit
      harum?
    </div>
    <div class="blur-sm">
      Lorem ipsum dolor sit amet consectetur, adipisicing elit. Itaque deserunt
      animi quas aliquam consectetur ut obcaecati voluptas repudiandae odit
      harum?
    </div>
    <div class="blur-lg">
      <img class="w-48" src="/assets/img/img1.jpg" alt="" />
    </div>
    <div class="blur-2xl">
      <img class="w-48" src="/assets/img/img1.jpg" alt="" />
    </div>

    <!-- Brightness -->
    <div class="brightness-50">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>
    <div class="brightness-100">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>
    <div class="brightness-150">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>
    <div class="brightness-200">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>

    <!-- Contrast -->
    <div class="contrast-50">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>
    <div class="contrast-100">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>
    <div class="contrast-150">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>
    <div class="contrast-200">
      <img class="w-48" src="/assets/img/img2.jpg" alt="" />
    </div>

    <!-- Grayscale -->
    <div class="grayscale">
      <img class="w-48" src="/assets/img/img3.jpg" alt="" />
    </div>

    <!-- Invert -->
    <div class="invert">
      <img class="w-48" src="/assets/img/img3.jpg" alt="" />
    </div>

    <!-- Sepia -->
    <div class="sepia">
      <img class="w-48" src="/assets/img/img3.jpg" alt="" />
    </div>

    <!-- Hue Rotate -->
    <div class="hue-rotate-15">
      <img class="w-48" src="/assets/img/img3.jpg" alt="" />
    </div>
    <div class="hue-rotate-90">
      <img class="w-48" src="/assets/img/img3.jpg" alt="" />
    </div>
    <div class="hue-rotate-180">
      <img class="w-48" src="/assets/img/img3.jpg" alt="" />
    </div>
    <div class="hue-rotate-60">
      <img class="w-48" src="/assets/img/img3.jpg" alt="" />
    </div>

    <!-- Saturate -->
    <div class="saturate-50">
      <img class="w-48" src="/assets/img/img4.jpg" alt="" />
    </div>
    <div class="saturate-100">
      <img class="w-48" src="/assets/img/img4.jpg" alt="" />
    </div>
    <div class="saturate-150">
      <img class="w-48" src="/assets/img/img4.jpg" alt="" />
    </div>
    <div class="saturate-200">
      <img class="w-48" src="/assets/img/img4.jpg" alt="" />
    </div>
  </body>
</html>

<!-- Blur
  blur-none	    filter: blur(0);
  blur-sm	      filter: blur(4px);
  blur	        filter: blur(8px);
  blur-md	      filter: blur(12px);
  blur-lg	      filter: blur(16px);
  blur-xl	      filter: blur(24px);
  blur-2xl	    filter: blur(40px);
  blur-3xl	    filter: blur(64px);
-->

<!-- Brightness
  brightness-0	    filter: brightness(0);
  brightness-50	    filter: brightness(.5);
  brightness-75	    filter: brightness(.75);
  brightness-90	    filter: brightness(.9);
  brightness-95	    filter: brightness(.95);
  brightness-100	  filter: brightness(1);
  brightness-105	  filter: brightness(1.05);
  brightness-110	  filter: brightness(1.1);
  brightness-125	  filter: brightness(1.25);
  brightness-150	  filter: brightness(1.5);
  brightness-200	  filter: brightness(2);
-->

<!-- Contrast
  contrast-0	  filter: contrast(0);
  contrast-50	  filter: contrast(.5);
  contrast-75	  filter: contrast(.75);
  contrast-100	filter: contrast(1);
  contrast-125	filter: contrast(1.25);
  contrast-150	filter: contrast(1.5);
  contrast-200	filter: contrast(2);
-->

<!-- Hue Rotate
  hue-rotate-0	    filter: hue-rotate(0deg);
  hue-rotate-15	    filter: hue-rotate(15deg);
  hue-rotate-30	    filter: hue-rotate(30deg);
  hue-rotate-60	    filter: hue-rotate(60deg);
  hue-rotate-90	    filter: hue-rotate(90deg);
  hue-rotate-180	  filter: hue-rotate(180deg);
-->
